<template>
  <div class="address">
    <!-- 头部标签 -->
    <div class="address-one">
      <van-nav-bar
        title="我的收货地址"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <!-- 内容部分 -->
    <div class="address-top">
      <div class="address-top-div" v-for="(item,i) in styleList" :key="i">
        <div class="address-name">{{item.receive_user_name}}</div>
        <div class="address-phone">{{item.receive_user_phone}}</div>
        <div class="address-region">{{item.receive_user_address}}</div>
        <div class="address-hellow" @click="boxrun(item)">
          <van-icon name="edit" />
        </div>
      </div>
    </div>
    <!-- 地址按钮 -->
    <div class="address-box">
      <button class="address-box-one" @click="show=true">
        新增地址
      </button>
      <!-- 新增地址的下来弹窗 -->
      <van-popup v-model="show" position="bottom" :style="{ height: '80%' }" class="address-popup">
        <van-form>
          <van-field
            v-model="fullname"
            name="姓名"
            label="姓名"
            placeholder="请填写姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="Telephone"
            name="电话"
            label="电话"
            placeholder="请填写电话"
            :rules="[{ required: true, message: '请填写电话' }]"
          />
          <van-field
            v-model="address"
            name="详细地址"
            label="详细地址"
            placeholder="请填写详细地址"
            :rules="[{ required: true, message: '请填写详细地址' }]"
          />
          <van-cell center title="默认地址" v-model="showdefault">
            <template #right-icon>
              <van-switch v-model="checked" size="24" />
            </template>
          </van-cell>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" @click="event">
              提交
            </van-button>
          </div>
        </van-form>
      </van-popup>
      <!-- 修改地址下拉弹窗 -->
      <van-popup v-model="mser" position="bottom" :style="{ height: '80%' }" class="address-popup">
        <van-form>
          <van-field
            v-model="namebox"
            name="姓名"
            label="姓名"
            placeholder="请填写姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="phone"
            name="电话"
            label="电话"
            placeholder="请填写电话"
            :rules="[{ required: true, message: '请填写电话' }]"
          />
          <van-field
            v-model="dress"
            name="详细地址"
            label="详细地址"
            placeholder="请填写详细地址"
            :rules="[{ required: true, message: '请填写详细地址' }]"
          />
          <van-cell center title="默认地址" v-model="showdefault">
            <template #right-icon>
              <van-switch v-model="checked" size="24" />
            </template>
          </van-cell>
          <div style="margin: 16px;">
            <van-button round block type="info" @click="maxs">
              提交
            </van-button>
          </div>
          <div style="margin: 16px;">
            <van-button round block type="danger" @click="deleteAddress">
              删除
            </van-button>
          </div>
        </van-form>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { newaddress, writeAddress, yijing, tomjus } from '@/api/address'
export default {
  name: 'Address',
  data () {
    return {
      show: false,
      mser: false,
      belerut: false,
      checked: true,
      fullname: '',
      Telephone: '',
      region: '',
      address: '',
      radio: '',
      showdefault: '',
      editId: '',
      styleList: [],
      namebox: '',
      phone: '',
      dress: ''
    }
  },
  created () {
    this.Theworld()
  },
  mounted () {

  },
  methods: {
    // 查看地址
    async Theworld () {
      try {
        const { data } = await newaddress()
        this.styleList = data.data
        console.log(data)
      } catch (err) {
        this.$toast('获取数据失败')
      }
    },
    // 新增地址
    async event () {
      try {
        const { data } = await writeAddress({
          receive_user_name: this.fullname,
          receive_user_phone: this.Telephone,
          receive_address_tag: this.region,
          receive_user_address: this.address,
          receive_user_gender: this.radio,
          is_default: this.showdefault,
          user_id: this.id
        })
        console.log(data)
        this.show = false
        this.Theworld()
      } catch (err) {
        this.$mount('添加失败')
      }
    },
    // 修改地址
    async boxrun (item) {
      this.mser = true
      console.log(item)
      this.editId = item.receive_address_id
      this.namebox = item.receive_user_name
      this.phone = item.receive_user_phone
      this.dress = item.receive_user_address
    },
    async maxs () {
      const { data } = await yijing(this.editId, {
        receive_user_name: this.namebox,
        receive_user_phone: this.phone,
        receive_user_address: this.dress
      })
      console.log(data)
      this.Theworld()
      this.mser = false
    },
    // 删除地址
    async deleteAddress () {
      const { data } = await tomjus(this.editId)
      console.log(data)
      this.Theworld()
      this.mser = false
    }
  }
}
</script>

<style scoped lang="less">
.address {
  .address-one {
    .van-nav-bar {
      background-color: #f93e2e;
      /deep/.van-nav-bar__title {
        color: #fff;
      }
      /deep/.van-icon {
        color: #fff;
        font-size: 45px;
      }
    }
  }
  height: 100%;
  position: relative;
  .address-box {
    width: 100%;
    .address-box-one {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 90px;
      border: 0;
      background-color: tomato;
      border-radius: 50px;
      font-size: 40px;
    }
    .address-popup {
      .addressgroup {
        border-bottom: 1px solid #ccc;
        .addressspan {
        margin: 10px 140px 0 25px;
        font-size: 30px;
        }
        .van-radio {
        height: 50px;
        margin-top: 10px;
        font-size: 30px;
        }
      }
    }
    .btn {
      margin: 30px;
      button {
        width: 100%;
        border: 0;
        border-radius: 50px;
        height: 80px;
        font-size: 30px;
        background-color: red;
        color: #fff;
      }
    }
  }
  // 内容样式
  .address-top {
    margin-top: 20px;
    .address-top-div {
      position: relative;
      width: 100%;
      height: 200px;
      background-color: #fff;
      border-radius: 25px;
      font-size: 30px;
      margin-bottom: 20px;
      background: url(../../../assets/qiche.png) no-repeat;
      background-size: 100%;
      .address-name {
        margin-top: 10px;
        font-size: 40px;
        display: inline-block;
      }
      .address-phone {
        font-size: 40px;
        display: inline;
      }
      .address-radio {
        width: 60px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;
        background-color: blueviolet;
        color: #fff;
        background-color: red;
        border-radius: 50px;
        display: inline-block;
      }
      .address-region {
        margin-top: 20px;
      }
      .address-hellow {
        position: absolute;
        right: 40px;
        top: 40%;
        font-size: 40px;
        .van-icon {
          font-size: 50px;
          color: red;
        }
      }
      div {
        margin-left: 20px;
      }
    }
  }
}
</style>
